<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户界面</title>
    <link rel="stylesheet" type="text/css" href="user.css">
    <script src="jQuery/jquery-3.6.0.min.js"></script>
</head>

<body>
    <div class="top">
        <div style="width: 980px;">
            <a class="biaoti" href="homepage.php">宇宙音乐</a>
            <a class="suoyin">评论</a>
            <a class="suoyin">合作</a>
            <a class="suoyin">客服</a>
            <a class="suoyin" href="buy.php">我的购买</a>
        </div>
    </div>
    <div class="middle">
        <div class="left">
            <img src="img/头像.jpg" style="float: left;">
            <ul style="float: left;">
                <li style="font-size: 30px;">用户名</li>
                <li style="color: grey;">所属地：河北</li>
                <li>个人介绍：我是华轻工的一名大三学生！这是我的PHP大作业！</li>
                <li><br/></li>
                <li><button onclick="tui()">退出登录</button></li>
            </ul>
        </div>
        <div class="right">
            <ul>
                <li>音乐</li>
                <li>曲库</li>
                <li>云盘</li>
                <li>MV</li>
                <li>我的圈子</li>
                <li>@我的</li>
                <li>创作</li>
                <li>推广</li>
            </ul>
        </div>
        <div class="left2">
            <ul style="color: grey;">
                <li style="font-size: 20px;">最新动态：我的好友</li>
                <li style="color: white;">天王星</li>
                <li>总听歌时长:248小时<br>推荐歌曲：梦想天空分外蓝</li>
                <li style="color: white;">海王星</li>
                <li>总听歌时长:156小时<br>推荐歌曲：如去年一样伤悲</li>
                <li style="color: white;">冥王星</li>
                <li>总听歌时长:188小时<br>推荐歌曲：蓝莲花</li>
            </ul>
        </div>
        <div class="right">
            <p>好友</p>
            <ul style="color: grey;">
                <li>哈雷彗星<br>在线中</li>
                <li>土星<br>上次在线2天前</li>
                <li>金星<br>上次在线12小时前</li>
                <li></li>
            </ul>
        </div>
        <div class="left2">
            <p style="font-size: 20px;">留言</p>
            <textarea style="width: 600px;height: 50px;margin: 10px;"></textarea>
            <p style="color:grey;">无更多留言</p>
        </div>
    </div>
    <div class="bottom">
        <p>
            <a>MUSIC</a> 树立版权意识，支持正版音乐！
      </p>
        <hr><br>
        <p>关于 宇宙音乐\推广合作请联系电子邮箱：2333333333@google.com</p>
    </div>
</body>
<script>
    //退出登录
    function tui() {
        if (confirm("确认要退出登录吗")) {
            localStorage.setItem("登录", "0");
            location.href = "login.php";
        }
    };
    //登录状态判定
    window.onload = function() {
        let denglu = localStorage.getItem("登录");
        if (denglu == "0") {
            window.location.href = "login.php";
        }
        let a = localStorage.getItem("用户名");
        document.getElementsByTagName("li")[0].innerText = a;
    }
</script>

</html>